<template>
  <div class="test-form">
    <div class="title">当前审批节点:{{ nodeName }}</div>
    <parser :key="key2" :form-conf="formConf" :is-approve="isApproved" :msg="msg" @submit="sumbitForm1" />
  </div>
</template>

<script>
import Parser from '../../components/parser/Parser'

// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'

export default {
  components: {
    Parser
  },
  props: {},
  data() {
    return {
      nodeName: '',
      isApproved: true,
      msg: '',
      key2: +new Date(),
      formConf: JSON.parse('{"fields":[{"__config__":{"layout":"rowFormItem","tagIcon":"row","layoutTree":true,"document":"https://element.eleme.cn/#/zh-CN/component/layout#row-attributes","span":24,"formId":108,"renderKey":1679917987671,"componentName":"row108","children":[{"__config__":{"label":"工程名称","labelWidth":"","showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","defaultValue":"A新度XXX220k线路增容改造工程","required":false,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":101,"renderKey":1679917652080},"__slot__":{"prepend":"","append":""},"placeholder":"工程名称","style":{"width":"100%"},"clearable":false,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":true,"disabled":false,"__vModel__":"gcmc_01"},{"__config__":{"label":"施工人数","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","defaultValue":"","required":true,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":102,"renderKey":1679917812575},"__slot__":{"prepend":"","append":""},"placeholder":"施工人数","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"sgrs_02"}]},"type":"flex","justify":"start","align":"middle"},{"__config__":{"layout":"rowFormItem","tagIcon":"row","layoutTree":true,"document":"https://element.eleme.cn/#/zh-CN/component/layout#row-attributes","span":24,"formId":110,"renderKey":1679918065755,"componentName":"row110","children":[{"__config__":{"label":"初勘风险等级","labelWidth":"","showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","defaultValue":"2级","required":false,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":111,"renderKey":1679918065755},"__slot__":{"prepend":"","append":""},"placeholder":"初勘风险等级","style":{"width":"100%"},"clearable":false,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":true,"disabled":false,"__vModel__":"skfxdj_03"},{"__config__":{"label":"复测风险等级","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","defaultValue":"2级","required":false,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":112,"renderKey":1679918065755},"__slot__":{"prepend":"","append":""},"placeholder":"复测风险等级","style":{"width":"100%"},"clearable":false,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":true,"disabled":false,"__vModel__":"field112_04"}]},"type":"flex","justify":"start","align":"middle"},{"__config__":{"layout":"rowFormItem","tagIcon":"row","layoutTree":true,"document":"https://element.eleme.cn/#/zh-CN/component/layout#row-attributes","span":24,"formId":120,"renderKey":1679918886716,"componentName":"row120","children":[{"__config__":{"label":"作业过程风险控制措施","tag":"el-checkbox-group","tagIcon":"checkbox","defaultValue":[1,2,3],"span":24,"showLabel":true,"labelWidth":160,"layout":"colFormItem","optionType":"default","required":false,"regList":[],"changeTag":true,"border":false,"document":"https://element.eleme.cn/#/zh-CN/component/checkbox","formId":119,"renderKey":1679918869298},"__slot__":{"options":[{"label":"1.搭设跨越架，事先与被跨越设施的单位取得联系，必要时请其派员监督检查。","value":1},{"label":"2.跨越架的中心在线路中心线上，宽度考虑施工期间牵引绳或导地线风偏后超出新建线路两边线各2.0m，且架顶两侧设外伸羊角。","value":2},{"label":"3.跨越架与高速公路、高速铁路、电气化铁路、110kv及以上运行电力线等的最小安全距离应符合规定要求。","value":3}]},"style":{},"size":"small","disabled":false,"__vModel__":"zygcfxkzcs_05"}]},"type":"flex","justify":"start","align":"middle"},{"__config__":{"label":"开票类型","showLabel":true,"labelWidth":null,"tag":"el-select","tagIcon":"select","layout":"colFormItem","span":24,"required":true,"regList":[],"changeTag":true,"document":"https://element.eleme.cn/#/zh-CN/component/select","formId":130,"renderKey":1679920011241},"__slot__":{"options":[{"label":"A票","value":"A"},{"label":"B票","value":"B"}]},"placeholder":"请选择开票类型","style":{"width":"100%"},"clearable":true,"disabled":false,"filterable":false,"multiple":false,"__vModel__":"kplx_11"},{"__config__":{"label":"技术人员","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":121,"renderKey":1679919542141},"__slot__":{"prepend":"","append":""},"placeholder":"请输入技术人员","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"jxry_06"},{"__config__":{"label":"施工人员","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":123,"renderKey":1679919579214},"__slot__":{"prepend":"","append":""},"placeholder":"请输入施工人员","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"sgry_07"},{"__config__":{"label":"新增人员","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":false,"layout":"colFormItem","span":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":125,"renderKey":1679919615284},"__slot__":{"prepend":"","append":""},"placeholder":"请输入新增人员","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"xzry_08"},{"__config__":{"label":"变化情况","labelWidth":null,"showLabel":true,"tag":"el-input","tagIcon":"textarea","required":false,"layout":"colFormItem","span":24,"regList":[],"changeTag":true,"document":"https://element.eleme.cn/#/zh-CN/component/input","formId":126,"renderKey":1679919679916},"type":"textarea","placeholder":"请输入变化情况","autosize":{"minRows":4,"maxRows":4},"style":{"width":"100%"},"maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"bhqk_09"},{"__config__":{"label":"控制措施","labelWidth":null,"showLabel":true,"tag":"el-input","tagIcon":"textarea","required":false,"layout":"colFormItem","span":24,"regList":[],"changeTag":true,"document":"https://element.eleme.cn/#/zh-CN/component/input","formId":128,"renderKey":1679919701940},"type":"textarea","placeholder":"请输入控制措施","autosize":{"minRows":4,"maxRows":4},"style":{"width":"100%"},"maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"kzcs_10"}],"formRef":"zypkp","formModel":"formData","size":"small","labelPosition":"left","labelWidth":100,"formRules":"rules","gutter":0,"disabled":false,"span":24,"formBtns":true}')
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const { query } = this.$route
    // 表单数据回填，模拟异步请求场景
    this.getNodeCode()
    this.$axios({
      method: 'get',
      url: `http://127.0.0.1:8080/flow-task/form-info?flowInstanceId=${query.flowInstanceId}`
    }).then(res => {
      this.isApproved = res.data.errCode !== -1
      this.msg = res.data.errMsg
      this.formConf = JSON.parse(res.data.data.form_template.content)
      setTimeout(() => {
      // 请求回来的表单数据
        const data = res.data.data.variables
        // 回填数据
        this.fillFormData(this.formConf, data)
        // 更新表单
        this.key2 = +new Date()
      }, 100)
    })
  },
  methods: {
    fillFormData(form, data) {
      form.fields.forEach(item => {
        if (item.__config__.children) {
          item.__config__.children.forEach(i => {
            const val = data[i.__vModel__]
            if (val) {
              i.__config__.defaultValue = val
            }
          })
        } else {
          const val = data[item.__vModel__]
          if (val) {
            item.__config__.defaultValue = val
          }
        }
      })
    },
    change() {
      this.key2 = +new Date()
      const t = this.formConf
      this.formConf = this.formConf2
      this.formConf2 = t
    },
    sumbitForm1(data) {
      const { query } = this.$route
      this.$axios({
        method: 'post',
        url: `http://127.0.0.1:8080/flow-task/commit-do?flowInstanceId=${query.flowInstanceId}`,
        data
      }).then(res => {
        this.$router.go(0)
      })
    },
    getNodeCode() {
      const { query } = this.$route
      this.$axios({
        method: 'get',
        url: `http://127.0.0.1:8080/flow-task/current-detail?flowInstanceId=${query.flowInstanceId}`
      }).then(res => {
        this.nodeName = res.data.data.currentTaskName
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .test-form {
    margin: 15px auto;
    width: 800px;
    padding: 15px;
  }
  .title{
  font-size: 20px;
  margin-bottom: 20px;
}
  </style>
